<template>
	<view class="page">
		<view style="padding: 5px 0;">
			<u-tabs ref="tabs" :list="list" active-color="#09C15F" :is-scroll="true" @change="change" inactive-color="#606266" font-size="30" :current="current"></u-tabs>
		</view>
		<view class="introduce-background">
			<view class="content">
				<h1>风寒感冒</h1>
				<view class="desc">疾病介绍：风寒感冒时因风吹受凉而引起的感冒，秋冬发生较多。</view>
			</view>
		</view>
		<!--商品列表-->
		<view class="recommend-list">
		  <view class="null" v-if="recommendData.length==0">
		    没有更多了~
		  </view>
		  <view class="recommend-item" v-for="(item,index) in recommendData" :key="index"  @click="toGoodsDetail(item.id)">
		    <view class="item-img">
		      <image :src="item.thumb_Url" mode="widthFix"/>
		    </view>
		    <view class="item-right">
		      <view class="item-des">{{item.name}}</view>
		      <view class="item-info">{{item.info==''?item.name:item.info}}</view>
		      <view class="price">
		        <view><span>￥{{item.s_price}}</span>
					<!-- <view>fasdfasdfasdfasdfasdfasdfasdfas发射点发射点发射点发</view> -->
				</view>
		        <image @click.stop="getGoodsDetails(item.id)" class="img" src="../../static/search/cart.png" />
		        <view class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</view>
		      </view>
		    </view>
		  </view>
		</view>
		<!--商品列表end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '风寒'
				}, {
					name: '风热'
				}, {
					name: '发烧'
				}, {
					name: '幼儿'
				}, {
					name: '咳嗽'
				}, {
					name: '咽痛'
				}],
				current: 0,
				barWidth: 0,
				recommendData: [
					{
						thumb_Url: '../../static/home/test3.png',
						name: '测试商品丫丫这是商品的详细劫煞牌呀呀呀这是商品的详细劫煞牌呀呀呀',
						info: '清热解毒，用于风寒感冒引起的头痛发热，咽通流涕',
						s_price: 20.90
					},
					{
						thumb_Url: '../../static/home/test3.png',
						name: '测试商品丫丫这是商品的详细劫煞牌呀呀呀这是商品的详细劫煞牌呀呀呀',
						info: '清热解毒，用于风寒感冒引起的头痛发热，咽通流涕',
						s_price: 20.90
					},
					{
						thumb_Url: '../../static/home/test3.png',
						name: '测试商品丫丫这是商品的详细劫煞牌呀呀呀这是商品的详细劫煞牌呀呀呀',
						info: '清热解毒，用于风寒感冒引起的头痛发热，咽通流涕',
						s_price: 20.90
					}
				]
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		},
		onLoad() {
			/* let _this = this;
			wx.getSystemInfo({
				success(res) {
					_this.barWidth = res.screenWidth/6*2;
				}
			}) */
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/css/mixin";
	.introduce-background{
		width: 100vw;
		height: 96px;
		background-image: url(../../static/goodsDetail/background.png);
		background-size: 100% auto;
		display: flex;
		align-items: center;
		justify-content: center;
		.content{
			width: calc(100vw - 40px);
			color: #FFFFFF;
			h1{
				font-size: 14px;
				font-weight: bold;
			}
			.desc{
				font-size: 11px;
				margin-top: 10px;
			}
		}
	}
	.recommend-list{
	  @include flexWrap(flex-start,flex-start);
	  flex-direction: row;
	  justify-content: space-between;
	  width: calc(100vw - 40rpx);
	  background-color: #F9F9F9;
	  padding: 20rpx;
	  .null{
	    width: 100%;
	    padding: 60rpx 0;
	    text-align: center;
	    font-size: 34rpx;
	    color: #959595;
	    height: 100rpx;
	    line-height: 100rpx;
	  }
	  .recommend-item{
	    width: calc((100% - 100rpx)/2);
	    padding: 20rpx;
	    margin-bottom: 10px;
		border-radius: 5px;
	    overflow: hidden;
	    background: #ffffff;
	    @include flex();
	    flex-direction: column;
	    .item-img{
	      width: calc((100vw - 120rpx)/2);
	      height: calc((100vw - 120rpx)/2);
	      border-radius: 16rpx;
	      overflow: hidden;
		  image {
			  width: calc((100vw - 120rpx)/2);
		  }
	    }
	    .item-right{
	      @include flex();
	      flex-direction: column;
	      height: 25vw;
	      width: 100%;
	      .item-des{
	        height: 6vw;
	        line-height: 6vw;
	        width: 100%;
	        font-size: 32rpx;
	        @include ellipsis(1);
	      }
	      .item-info{
	        height: 6vw;
	        line-height: 6vw;
	        width: 100%;
	        font-size: 24rpx;
	        color: #aaaaaa;
	        @include ellipsis(2);
	
	      }
	      .price{
	        font-size: 34rpx;
	        @include flex(flex-start,flex-end);
	        flex-direction: row;
	        height: 8vw;
	        width: 100%;
	        color: #F55D0E;
	        font-weight: bold;
	        position: relative;
	        .original{
	          font-size: 22rpx;
	          color: #707070;
	          text-decoration: line-through;
	          padding-left: 20rpx;
	        }
	        .img{
	          margin-left: auto;
	          width: 29px;
	          height: 29px;
	        }
	        .img-icon{
	          position: absolute;
	          bottom: 20rpx;
	          right: 0;
	          width: 20rpx;
	          height: 20rpx;
	          background: #e12317;
	          border-radius: 360rpx;
	          color: #ffffff;
	          font-size: 18rpx;
	          text-align: center;
	          line-height: 20rpx;
	        }
	      }
	      .sale_count{
	        position: relative;
	        font-size: 24rpx;
	        color: #b2b2b2;
	        width: 100%;
	        height: 40rpx;
	        line-height: 40rpx;
	        @include flex(flex-start);
	        .img{
	          margin-left: auto;
	          width: 40rpx;
	          height: 40rpx;
	        }
	        .img-icon{
	          position: absolute;
	          bottom: 20rpx;
	          right: 0;
	          width: 20rpx;
	          height: 20rpx;
	          background: #e12317;
	          border-radius: 360rpx;
	          color: #ffffff;
	          font-size: 18rpx;
	          text-align: center;
	          line-height: 20rpx;
	        }
	      }
	    }
	
	  }
	}
</style>
